<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<title>注册页面</title>
	<link rel="shortcut icon" type="image/x-icon" href="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<style>
		.input-group-addon{
			color: #FFB91E;
		}
		.notgo{
			color: #ff0000 !important;
		}
		a {
			color: #fff;
		}

		a:hover {
			color: #CCC;
			text-decoration: none;
		}

		.checkbox {
			text-align: center;
		}
	</style>
</head>

<body style="background-image: url(img/bg_c.jpg);">
	<div class="container" id="app" style="background-color: rgba(255, 255, 255, 0.3); border-radius: 8px; margin-top: 150px; width: 400px;">
		<div class="row" align="center">
			<div style="width: 90%; margin: 10px auto;">
				<p>
					<font size="6" color="white">Hello,欢迎加入我们!</font>
				</p>
			</div>
		</div>
		<div class="row">
			<div style="width: 90%; margin: 0 auto; margin-bottom: 20px;">
				<div class="form-group">
					<span class="input-group">
						<input type="text" class="form-control" v-model="user.username" @change="existsName()" placeholder="登陆账号(英文/数字[4-12])">
						<span class="input-group-addon" :class="{notgo:verify.username}">★</span>
					</span>
				</div>
				<div class="form-group">
					<span class="input-group">
						<input type="text" class="form-control" v-model="user.phone" @keyup="getSendTime()" placeholder="手机号">
						<span class="input-group-addon" :class="{notgo:verify.phone}">★</span>
					</span>
				</div>
				<div class="form-group">
					<span class="input-group">
						<input type="text" class="form-control" v-model="user.code" placeholder="短信验证码" />
						<span class="input-group-btn">
							<input class="btn btn-info" type="button" @click="sendCode()" :disabled="verify.phone || time > 0" :value="time ? time + '秒' : '获取验证码'" />
						</span>
					</span>
				</div>
				<div class="form-group">
					<span class="input-group">
						<input type="password" class="form-control" v-model="user.password" @change="password()" placeholder="密码(英文/数字[6-20])">
						<span class="input-group-addon" :class="{notgo:verify.password}">★</span>
					</span>
				</div>
				<div class="form-group">
					<span class="input-group">
						<input type="password" class="form-control" v-model="user.password2" @change="password2;" placeholder="确认密码">
						<span class="input-group-addon" :class="{notgo:verify.password2}">★</span>
					</span>
				</div>
				<div class="form-group">
					<button class="btn btn-info" @click="submit" style="width: 100%;">注册</button>
				</div>
				<div class="form-group checkbox">
					<a href="index.html">
						<font size="3">已经有账号?去登陆!</font>
					</a>
				</div>
			</div>
		</div>
	</div>

	<!-- layer -->
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/layer.js"></script>

	<script>
		function errInfo(msg) {
			layer.open({
				title: '提示',
				content: msg,
				btn: ['我知道了']
			});
		}
	</script>

	<!-- vue -->
	<script src="js/vue.js"></script>

	<!-- 请求 -->
	<script src="js/axios.min.js"></script>
	<script src="js/request.js"></script>

	<script type="text/javascript">

		var vm = new Vue({
			el: "#app",
			data: {
				//用户信息
				user: {
					code: "",
					username: "",
					password: "",
					password2: "",
					phone: "",
				},
				//校验结果
				verify: {
					code: false,
					username: false,
					password: false,
					password2: false,
					phone: false,
				},
				time: 0
			},
			created() {
				this.username;
				this.phone;
				this.password;
			},
			methods: {
				//注册
				submit() {

					var boo = false;
					// TODO 校验
					for (var k in this.verify) {

						//判断用户名是否可用
						if (k == "username") {
							this.existsName();
						}
						if (this.verify[k]) {
							errInfo("请按照要求填写信息!");
							return;
						}
					}

					if (boo) {
						errInfo("请按照要求填写信息!");
						return;
					}
					//注册
					register(this.user).then(res => {
						if (res.data.errno == 0) {
							layer.open({
								title: '提示',
								content: res.data.errmsg,
								btn: ['去登陆', '取消'],
								yes: function (index, layero) {
									layer.close(index);
									//跳转到登陆
									location.href = "index.html";
								}
							});
						} else {
							errInfo(res.data.errmsg)
						}

					})
				},
				//判断用户名是否可用
				existsName() {
					this.username;
					//本地验证
					if (this.verify.username) {
						return;
					}
					//发送请求验证
					existsName(this.user.username).then(res => {
						if (res.data.errno == 1) {
							this.verify.username = true;
							errInfo("用户名已存在!");
						}
					});
				},
				//获取上次手机验证码发送时间
				getSendTime() {
					if (!this.phone) {
						getSendTime(this.user.phone).then(res => {
							if (res.data.errno == 0) {
								this.time = 60 - Math.ceil((new Date().getTime() - res.data.data) / 1000);
								this.countDown();
							}
						})
					}
				},
				//发送验证码
				sendCode() {
					layer.open({
						type: 2,
						title: "图片验证码",
						area: ['365px', '130px'],
						skin: 'layui-layer-rim', //加上边框
						content: ['verify.html', 'no']
					});
				},
				//时间倒计时
				countDown() {
					this.time--;
					if (this.time <= 0) {
						this.time = 0;
						return;
					} else {
						setTimeout(function () {
							vm.countDown();
						}, 1000);
					}

				}

			},
			computed: {
				// TODO 检验
				//校验账号
				username() {
					var reg = new RegExp(/^[\d_a-zA-Z]{4,12}$/);
					var b = !reg.test(this.user.username);
					this.verify.username = b;
					return b;
				},
				//校验手机号
				phone() {
					var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
					var b = !myreg.test(this.user.phone);
					this.verify.phone = b;
					return b;
				},
				password() {
					var reg = new RegExp(/^[\d_a-zA-Z]{6,20}$/);
					var b = !reg.test(this.user.password);
					this.verify.password = b;
					return b;
				},
				password2() {
					var b = !this.user.password == this.user.password2;
					this.verify.password2 = b;
					return b;
				}
			}
		})

	</script>

</body>


</html>